<!DOCTYPE html>
<html lang="en" class="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sign Up</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      /* Light Mode Gradient (Teal/Cyan) */
      --bg-start: hsla(202, 71%, 27%, 1);
      --bg-end: hsla(176, 45%, 66%, 1);
    }

    .dark {
      /* Dark Mode Gradient (Purple) */
      --bg-start: hsla(252, 40%, 29%, 1);
      --bg-end: hsla(270, 77%, 71%, 1);
    }

    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(90deg, var(--bg-start), var(--bg-end));
      background-size: 400% 400%;
      animation: gradientAnimation 15s ease infinite;
      transition: background 0.5s ease-in-out;
    }

    @keyframes gradientAnimation {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* Glassmorphism card effect */
    .bg-card {
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      background-clip: padding-box;
    }

    .dark .bg-card {
      background-color: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    .light .bg-card {
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.25);
    }

    /* Input field styling */
    .form-input {
      border: 1px solid transparent;
      transition: all 0.2s ease-in-out;
    }
    .dark .form-input {
        background-color: rgba(0, 0, 0, 0.25);
        border-color: rgba(100, 100, 100, 0.4);
    }
    .light .form-input {
        background-color: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.4);
    }
    .form-input:focus {
        border-color: #a78bfa;
        box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.5);
        background-color: rgba(0, 0, 0, 0.3);
    }
    .light .form-input:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
        background-color: rgba(255, 255, 255, 0.3);
    }
    /* Placeholder color */
    .dark .form-input::placeholder { color: rgba(156, 163, 175, 0.6); }
    .light .form-input::placeholder { color: rgba(255, 255, 255, 0.7); }
  </style>
  <script>
    function setTheme(theme) {
      document.documentElement.classList.toggle('dark', theme === 'dark');
      localStorage.setItem('theme', theme);
    }
    document.addEventListener('DOMContentLoaded', () => {
        const storedTheme = localStorage.getItem('theme');
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        setTheme(storedTheme || (prefersDark ? 'dark' : 'light'));
    });
    function toggleTheme() {
      const isDark = document.documentElement.classList.contains('dark');
      setTheme(isDark ? 'light' : 'dark');
    }
  </script>
</head>
<body class="min-h-screen flex items-center justify-center p-4
             text-gray-800 dark:text-gray-100">

  <div id="auth-card" class="bg-card shadow-2xl rounded-3xl p-8 w-full max-w-sm relative">
    <button onclick="toggleTheme()" class="absolute top-4 right-4 p-2 rounded-full
                                          text-white/70 hover:text-white
                                          hover:bg-white/20 dark:hover:bg-black/20 transition-colors duration-200">
      <!-- SVG Icon for theme toggle -->
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 7.625A.75.75 0 018.25 7.5h.75a.75.75 0 01.75.75v.75a.75.75 0 01-.75.75h-.75A.75.75 0 017.5 8.375v-.75zM15 7.5a.75.75 0 01.75.75v.75a.75.75 0 01-1.5 0v-.75a.75.75 0 01.75-.75zM17.65 6.33a.75.75 0 011.06 0l1.06 1.06a.75.75 0 010 1.06l-1.06 1.06a.75.75 0 01-1.06 0L17.65 7.39a.75.75 0 010-1.06zM6.34 17.65a.75.75 0 010-1.06l1.06-1.06a.75.75 0 011.06 0l1.06 1.06a.75.75 0 010 1.06l-1.06 1.06a.75.75 0 01-1.06 0zM12 17.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V18a.75.75 0 01.75-.75zM2.25 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3a.75.75 0 01-.75-.75zM18 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5h-2.25a.75.75 0 01-.75-.75zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z" /></svg>
    </button>
    <div id="card-content">
        <div class="text-center mb-8">
           <div class="w-16 h-16 mx-auto bg-gradient-to-br from-teal-400 to-cyan-500 dark:from-indigo-500 dark:to-purple-500 rounded-full flex items-center justify-center text-white text-3xl font-bold shadow-lg mb-4">
            🚀
          </div>
          <h1 class="text-4xl font-semibold text-white/95 leading-tight">Create Account</h1>
          <p class="text-md text-white/70 mt-1">Join us to get started</p>
        </div>

        <form id="signup-form" class="space-y-6">
          <div>
            <label for="username" class="block text-sm font-medium text-white/80 mb-2">Username</label>
            <input id="username" name="username" type="text" autocomplete="username" required placeholder="Username"
                   class="form-input block w-full px-5 py-3 rounded-xl text-white">
          </div>
          <div>
            <label for="email" class="block text-sm font-medium text-white/80 mb-2">Email address</label>
            <input id="email" name="email" type="email" autocomplete="email" required placeholder="you@example.com"
                   class="form-input block w-full px-5 py-3 rounded-xl text-white">
          </div>
          <div>
            <label for="password" class="block text-sm font-medium text-white/80 mb-2">Password</label>
            <input id="password" name="password" type="password" autocomplete="new-password" required placeholder="••••••••"
                   class="form-input block w-full px-5 py-3 rounded-xl text-white">
          </div>

          <div id="message-box" class="pt-2 text-center text-sm font-medium hidden"></div>

          <div>
            <button type="submit"
                    class="w-full py-3 px-4 mt-2 rounded-xl font-semibold text-white text-lg
                           bg-gradient-to-r from-cyan-500 to-teal-500 dark:from-indigo-600 dark:to-purple-600
                           hover:from-cyan-600 hover:to-teal-600 dark:hover:from-indigo-700 dark:hover:to-purple-700
                           focus:ring-4 focus:ring-cyan-300 dark:focus:ring-purple-700
                           shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
              Sign Up
            </button>
          </div>

          <div class="text-center text-sm">
            <span class="text-white/60">Already have an account?</span>
            <a href="/auth/login" class="font-medium text-purple-300 hover:text-purple-200 light:text-cyan-200 light:hover:text-white transition-colors duration-200">
              Sign In
            </a>
          </div>
        </form>
    </div>
  </div>

  <script>
    const form = document.getElementById('signup-form');
    const messageBox = document.getElementById('message-box');
    const cardContent = document.getElementById('card-content');

    form.addEventListener('submit', async (e) => {
        e.preventDefault();

        const username = document.getElementById('username').value;
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;

        try {
            const response = await fetch('/auth/signup', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ username, email, password })
            });



            if (response.ok) {
                if (response.status === 202) {
                    cardContent.innerHTML = `
                        <div class="text-center">
                            <div class="w-20 h-20 mx-auto bg-gradient-to-br from-sky-400 to-cyan-400 rounded-full flex items-center justify-center text-white text-4xl font-bold shadow-lg mb-4">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                            </div>
                            <h1 class="text-4xl font-semibold text-white/95 leading-tight">Check Your Email</h1>
                            <p class="text-md text-white/70 mt-2 max-w-sm mx-auto">
                                We've sent a verification link to <strong class="font-medium">${email}</strong>. Please check your inbox or spam for link to activate your account.
                            </p>
                        </div>
                    `;
                } else if (response.status === 201) {
                    const data = await response.json();
                    showMessage(data.content || 'Success! Redirecting...', 'text-green-300/90');
                    setTimeout(() => window.location.href = '/auth/login', 3000);
                }
            } else {
                const data = await response.json();
                showMessage(data.detail || 'An error occurred.', 'text-red-300/90');
            }
        } catch (error) {
            showMessage('Network error. Please try again.', 'text-red-300/90');
        }
    });

    function showMessage(text, colorClass) {
        // This function might need adjustment if the form is removed from the DOM
        const msgBox = document.getElementById('message-box');
        if (msgBox) {
            msgBox.textContent = text;
            msgBox.className = `pt-2 text-center text-sm font-medium ${colorClass}`;
            msgBox.style.display = 'block';
        }
    }
  </script>
</body>
</html>

